<!-- 新手指引模块 -->
<template>
    <el-tooltip content="新手指引" placement="bottom">
        <svg-icon name="survey" @click="guideStart"></svg-icon>
    </el-tooltip>
</template>
<script lang='ts' setup>
import { guideInstance, Step } from '@/utils/guide';
import { nextTick } from 'vue';
import 'intro.js/introjs.css'
import "@/style/guide.less"
import { useSetting } from '@/pinia';

const SettingStore = useSetting()
const guideSteps: Step[] = [
    {
        element: "#stepHeaderAction",
        intro: "快捷操作按钮区域。依次为 设置、新手指引、全屏、天气预报、用户名称及用户头像。点击用户头像可修改个人信息及退出登录",
        position: "bottom"
    },
    {
        element: "#stepHeaderBread",
        intro: "导航区域。记录用户跳转的菜单，可点击快捷进入菜单页面。或删除此记录。也可在设置中折叠此区域",
        position: "bottom"
    },
    {
        element: "#stepHeaderExpand",
        intro: "控制左侧菜单栏的图标，可快捷折叠、展开左侧菜单栏",
        position: "bottom"
    },
    {
        element: "#container-aside",
        intro: "所有目录菜单集合，每个菜单对应相应的页面，可通过折叠按钮进行折叠或展开",
        position: "bottom"
    },
    {
        element: "#container-main",
        intro: "主视图区域。响应左侧菜单的变化而动态切换内容",
        position: "left"
    },
    
]
const guideStart = () => {

    SettingStore.layout = "B"

    nextTick(()=>{
        const guide = guideInstance(guideSteps)
        guide?.start
    })
}
</script>
<style scoped></style>